<template>
<!-- 加工发料列表 -->
  <div class="e-table">
     <div class="top">
      <div class="left" style="margin-left: 10px;">
        <div>
        <el-button size="mini" @click="buttonAdd()" style="background: #7aa818; color: #fff">新增</el-button>
        </div>
      </div>
      <div class="right">
        <div>
            <el-input
              placeholder="输入项目编号或机构"
              size="small"
              v-model="pagination.keyword"
              @blur="search"
          >
              <i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i>
          </el-input>
        </div>
          <div style="margin-left: 5px;">
          <el-button size="small" style="background: #2e61d7; color: #fff"
          @click="heightSharch"
            >高级搜索</el-button
          >
        </div>
      </div>
    </div>

      <el-table
        class="table"
        border
        ref="table"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @cell-mouse-enter="cellMouseEnter"
        @cell-mouse-leave="cellMouseLeave"
                v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
      >
       <el-table-column type="selection" width="50" v-if="isBatch" fixed>
      </el-table-column>

        <el-table-column label="发料编号" min-width="250" fixed show-overflow-tooltip>
          <template slot-scope="scope">
            <span @click="click(scope.row.billId,scope.row.state)" style="color:blue; cursor: pointer;">
             {{scope.row.billNo}}

          </span>

          </template>
        </el-table-column>
        <el-table-column
          prop="issueDate"
          label="发料日期"
          width="100"
        >
        </el-table-column>

         <el-table-column
          prop="pickingUnitName"
          label="领料单位"
          min-width="200"
          show-overflow-tooltip
        >
        </el-table-column>

         <el-table-column
          prop="businessType"
          label="业务类型"
          width="100"
        >
         <template slot-scope="scope">
           <span>{{['','分包合同','销售合同','事实合同','砼调拨'][scope.row.businessType]}}</span>
        </template>
         </el-table-column>
         <el-table-column
          prop="contractBillNo"
          label="合同"
          min-width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
          {{ scope.row.contractBillNo === '' ? '未关联' : scope.row.contractBillNo}}
        </template>
        </el-table-column>

         <el-table-column
          prop="issuedQuantity"
          label="发料数量"
          width="150"
        >
        </el-table-column>

        <el-table-column
          prop="state"
          label="状态"
          width="100"
        >
        <template slot-scope="scope">
           <ToolHistory v-if="scope.row.state == '1'" :key="scope.$index" url="/material/flowEngin/getAuditHistory" :billId="scope.row.billId" :billType="1011">
                <span   v-status="scope.row.state">
                    {{["草稿", "审核中", "已审核", "已关闭",'', "已作废"][scope.row.state]}}
                </span>
            </ToolHistory>
            <span v-else  v-status="scope.row.state">
                {{["草稿", "审核中", "已审核", "已关闭",'', "已作废"][scope.row.state]}}
            </span>
        </template>
         </el-table-column>
         <el-table-column
          prop="orgName"
          label="所属机构"
          width="250"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="cancellingAmount"
          label="退库数量"
          width="150"
        >

        </el-table-column>
        <el-table-column
          prop="isOut"
          label="数据来源"
          width="100"
        >
         <template slot-scope="scope">
          <span>{{['新增','磅单传输'][scope.row.isOut]}}</span>
        </template>
        </el-table-column>

      </el-table>

      <ComPagination
      :total="pagination.total"
            :pageSize.sync="pagination.pageSize"
            :currentPage.sync="pagination.currentPage"
            @currentChange="processIssue"
            @sizeChange="processIssue"
    />

  </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination.vue'
import { mapMutations } from 'vuex'
import Api from '@/api/materials/processIssue.js'
import CommonApi from '@/api/materials/common.js'
import { vueDom, debounce, advanceSearch, showLoading, hideLoading, } from '@/utils/common.js'
export default {
    components: {
        ComPagination,
    },
    data () {
        return {
            isBatch: false, //是否进入批量操作
            batch: '进入批量管理',
            dialogVisibleSearch: false,
            searchIpt: '',
            input1: '',
            value1: '',
            value2: '',
            multipleSelection: [],
            tableData: [
                {
                    billNo: '', //发料编号
                    issueDate: '', //发料日期
                    orgName: '', //机构
                    pickingUnitName: '', //领料单位
                    businessType: '', //业务类型
                    contract: '', //合同
                    issuedQuantity: '', //发料数量
                    state: '', //状态
                    cancellingAmount: '', //退库数量

                },
            ],
            MouseEnterId: 0,
            pagination: {
                total: 0,
                pageSize: 20,
                currentPage: 1,
                'beginPlanDate': '',
                'businessTypes': [],
                'endPlanDate': '',
                'keyword': '',
                'limit': 20,
                'orgId': '',
                'page': 1,
                'pickingUnitId': '',
                'states': []
            },
        }
    },
    created () {
        showLoading()
        this.processIssue()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 170
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 170
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        ...mapMutations(['setSearchData']),
        //模糊搜索
        search () {
            this.processIssue()
        },
        //清空高级搜索的数据
        clearData () {
            this.pagination = {
                'beginPlanDate': '',
                'businessTypes': [],
                'endPlanDate': '',
                'keyword': '',
                'limit': 20,
                'orgId': '',
                'page': 1,
                'pickingUnitId': '',
                'states': []
            }
            this.setSearchData({ equipSearchData: this.pagination })
        },
        // 高级搜索
        heightSharch () {
            advanceSearch('/processIssueHeightSearch').then(res => {
                this.pagination = res.equipSearchData
                this.processIssue()
                this.clearData()
            })
        },
        //批量管理
        batchOperation () {
            this.isBatch = !this.isBatch
            if (this.isBatch) {
                this.batch = '退出批量管理'
                this.$refs.table.clearSelection()
            } else {
                this.batch = '进入批量管理'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.id
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        handleSelectionChange (val) {
            this.multipleSelection = val
            console.log(this.multipleSelection)
        },
        //根据条件分页查询加工发料
        processIssue () {
            if(this.pagination.currentPage) {
                this.pagination.page = this.pagination.currentPage
            }
            if(this.pagination.pageSize) {
                this.pagination.limit = this.pagination.pageSize
            }
            Api.processIssue(this.pagination)
                .then(res => {
                    this.tableData = res.list
                    this.pagination.total = res.totalCount
                    hideLoading()
                })
        },
        //新增按钮
        buttonAdd () {
            this.$router.push('/processIssueAdd')
        },
        //点击编号
        click (billid, state) {
            if(state == -1 || state == 2 || state == 5 ) {
                this.$router.push({
                    path: '/processIssueDetails',
                    query: { billid },
                })
            }else {
                CommonApi.getCurrentUnitInfo({
                    'billId': billid,
                    'billType': '1011',
                    'freeNextUnitIndex': 0,
                    'freeNextUser': '',
                    'isPass': true,
                    'isShareInAudit': true,
                    'opinion': '',
                    'orgId': '',
                    'orgName': '',
                    'userId': '',
                    'workId': ''
                })
                    .then(res=>{
                        if(res.canModify) {
                            this.$router.push({
                                path: '/processIssueEdit',
                                query: { billid, res },
                            })
                        }else{
                            this.$router.push({
                                path: '/processIssueDetails',
                                query: { billid },
                            })
                        }
                    })
            }

        },

    },
}
</script>
<style lang="scss" scoped>
.like {
  color: rgb(46, 97, 215);
  font-size: 17px;
  line-height: 30px;
  cursor: pointer;
}
::v-deep.el-table .cell {
  text-align: center;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 10px; // 纵向滚动条
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 5px;
}
</style>